<template>
    <!-- 优惠券组 -->
    <view class="diy-coupon" v-if="dataList.length" :style="'background: ' + itemStyle.background + '; padding: ' + itemStyle.paddingTop + 'px 0;'">
        <scroll-view :scroll-x="true">
            <view class="coupon-wrapper" v-for="(dataItem, index) in dataList" :key="index">
                <view :class="'coupon-item color__' + (dataItem.state.value ? dataItem.color.text : 'gray')">
                    <i class="before" :style="'background: ' + itemStyle.background + ';'"></i>
                    <view class="left-content dis-flex flex-dir-column flex-x-center flex-y-center">
                        <view class="content-top">
                            <block v-if="dataItem.coupon_type.value == 10">
                                <text class="f-30">￥</text>
                                <text class="price">{{ dataItem.reduce_price }}</text>
                            </block>
                            <text class="price" v-if="dataItem.coupon_type.value == 20">{{ dataItem.discount }}折</text>
                        </view>
                        <view class="content-bottom">
                            <text class="f-22">满{{ dataItem.min_price }}元可用</text>
                        </view>
                    </view>
                    <view
                        class="right-receive dis-flex flex-x-center flex-y-center"
                        @tap.stop.prevent="receiveTap"
                        :data-index="index"
                        :data-state="dataItem.state.value"
                        :data-coupon-id="dataItem.coupon_id"
                    >
                        <view v-if="dataItem.state.value" class="dis-flex flex-dir-column">
                            <text>立即</text>
                            <text>领取</text>
                        </view>
                        <view v-else class="state">
                            <text>{{ dataItem.state.text }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            dataItem: {
                state: {
                    value: false,
                    text: ''
                },

                color: {
                    text: ''
                },

                coupon_type: {
                    value: 0
                },

                reduce_price: '',
                discount: '',
                min_price: '',
                coupon_id: ''
            }
        };
    },
    options: {},
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
        itemIndex: String,
        itemStyle: Object,
        params: Object,
        dataList: Array || Object
    },
    methods: {
        /**
         * 领取优惠券
         */
        receiveTap: function (e) {
            let that = this;
            let dataset = e.currentTarget.dataset;
            if (!dataset.state) {
                return false;
            }
            app.globalData._post_form(
                'coupon/receive',
                {
                    coupon_id: dataset.couponId
                },
                function (result) {
                    app.globalData.showSuccess(result.msg);
                    that.setData({
                        ['dataList[' + dataset.index + '].state']: {
                            value: 0,
                            text: '已领取'
                        }
                    });
                }
            );
        }
    },
    created: function () {}
};
</script>
<style>
@import './coupon.css';
</style>
